
<!DOCTYPE html>
<head>
<?php include_once VIEWS.'inc/head.php'; ?>
</head>

<body>
	<?php include_once VIEWS.'inc/header.php'; ?>
	<div class="main vision">
		<div class="abanner">
			<img src="<?php echo static_file('web/img/vision.jpg'); ?>" alt="">
			<div class="txt_box js-m txt_box2">
				<div class="tab">
					<div class="tab_cell">
						<div class="tit">业务领域 > 视觉创意</div>
						<div class="en">Visual<span>ideas</span></div>
						<div class="txt">视觉创意</div>
						<div class="ico">
							<img src="<?php echo static_file('web/img/ico.png'); ?>" alt="">
						</div>
						<div class="con">
							<div class="conn">
								<p>创意视觉未来愿景：成为全球显示世界中的虚拟视觉大师</p>
								<p>创意视觉未来使命：让所有人可以看到梦想</p>
								<p>创意视觉战略目标：成为虚拟现实领域终端呈现机构的领军，缩短虚拟和现实之间的应用距离</p>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>

		<?php include_once VIEWS.'inc/business_vision.php'; ?>
		<div class="tabs_m">
			<div class="tabs_tit">
				<h6>企业数字视觉解决方案</h6>
				<div class="icon"><span></span></div>
			</div>
			<div class="tabs_con">
				<ul>
					<li>
						<a href="<?php echo site_url('business/vision/experience'); ?>">
							地产数字体验中心
						</a>
					</li>
					<li>
						<a href="<?php echo site_url('business/vision/video'); ?>">
							影视动画
						</a>
					</li>
				</ul>
			</div>
		</div>

		<div class="vision_box">
			<div class="tit_box js-m w1440">
				<div class="title">
					<div class="en">solution</div>
					<div class="cn">企业数字视觉解决方案</div>
				</div>
				<div class="line"></div>
				<div class="txt">金东数字视觉解决方案将为企业解决品牌文化秀、研发实验室、品牌软性数字包装、虚拟体验中心、虚拟交互娱乐等展现和体验问题，帮助企业提高品牌和产品价值，打造数字化营销新方式</div>
			</div>

			<div class="pro-swiper w1440 js-m">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;">
								<div class="img_box">
									<div class="tu">
										<div class="mask"></div>
										<img src="<?php echo static_file('web/img/ss.jpg'); ?>" alt="">
									</div>
									<div class="bg"></div>
								</div>	
								<div class="txt">
									<div class="tab">
										<div class="tab_cell">
											<div class="cn">品牌文化秀</div>
											<div class="en">Brand culture show</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;">
								<div class="img_box">
									<div class="tu">
										<div class="mask"></div>
										<img src="<?php echo static_file('web/img/ss.jpg'); ?>" alt="">
									</div>
									<div class="bg"></div>
								</div>	
								<div class="txt">
									<div class="tab">
										<div class="tab_cell">
											<div class="cn">研发实验室</div>
											<div class="en">R & D laboratory</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;">
								<div class="img_box">
									<div class="tu">
										<div class="mask"></div>
										<img src="<?php echo static_file('web/img/ss.jpg'); ?>" alt="">
									</div>
									<div class="bg"></div>
								</div>	
								<div class="txt">
									<div class="tab">
										<div class="tab_cell">
											<div class="cn">品牌软性数字包装</div>
											<div class="en">Brand soft numbers package</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;">
								<div class="img_box">
									<div class="tu">
										<div class="mask"></div>
										<img src="<?php echo static_file('web/img/ss.jpg'); ?>" alt="">
									</div>
									<div class="bg"></div>
								</div>	
								<div class="txt">
									<div class="tab">
										<div class="tab_cell">
											<div class="cn">虚拟体验中心</div>
											<div class="en">Brand culture show</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;">
								<div class="img_box">
									<div class="tu">
										<div class="mask"></div>
										<img src="<?php echo static_file('web/img/ss.jpg'); ?>" alt="">
									</div>
									<div class="bg"></div>
								</div>	
								<div class="txt">
									<div class="tab">
										<div class="tab_cell">
											<div class="cn">虚拟交互娱乐</div>
											<div class="en">Brand culture show</div>
										</div>
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="pro_box ajax-box js-m">
				<div class="pbox w1440">
					<div class="tbox">
						<div class="line"></div>
						<div class="t">
							<div class="cn">品牌软性数字包装</div>
							<div class="en">Brand soft digital packaging</div>
						</div>
					</div>
					<div class="pro_top w1440 f-cb">
						<div class="pro_r" style="background:url(<?php echo static_file('web/img/sj.jpg'); ?>) no-repeat center center;background-size:cover"></div>
						<div class="pro_l">
							<div class="border"></div>
							<div class="t">品牌形象数字亮化</div>
							<div class="con">
								<p>在夜间或室内塑造与众不同的品牌形象堡垒，既能有效提高品牌形象，还能营造事件传播效果，是目前大都市亮化工程中最具价值的品牌传播方式。</p>
								<p>可应用在塑造旅游景点、企业办公楼亮化、指定地点品牌推广、企业园区、企业LOGO、企业展示墙、公司内展厅、出入门等领域。能有效的与周围环境和建筑结构结合，通过空间再造和结构融合达到裸眼3D的震撼视觉效果。</p>
							</div>
						</div>
						
					</div>
				</div>
				<div class="problem" style="background:url(<?php echo static_file('web/img/sbg.jpg'); ?>) no-repeat center center;background-size:cover;">
					<div class="problem_cen w1440">
						<div class="ico">
							<img src="<?php echo static_file('web/img/hua.png'); ?>" alt="">
						</div>
						<div class="ti">数字视觉为<span>企业品牌软性包装</span>解决核心问题</div>
						<div class="list">
							<ul class="f-cb">
								<li>
									<div class="bg"></div>
									<div class="icon">
										<img src="<?php echo static_file('web/img/la.png'); ?>" alt="">
										
									</div>
									<div class="t">增加品牌传播影响力</div>
									<div class="con">
										用数字技术为企业塑造互联网传播素材和内容将企业的品牌展现通过虚拟现实提高传播动机使企业品牌得以更快、更广的传播
									</div>
								</li>
								<li class="active">
									<div class="bg"></div>
									<div class="icon">
										<img src="<?php echo static_file('web/img/z.png'); ?>" alt="">
										
									</div>
									<div class="t">提高品牌营销价值</div>
									<div class="con">
										将企业对外所用的营销用品进行数字化包装为企业营销时添加品牌的创新实力和高端定位，让客户更深刻的记住企业的品牌印象

									</div>
								</li>
								<li>
									<div class="bg"></div>
									<div class="icon">
										<img src="<?php echo static_file('web/img/sz.png'); ?>" alt="">
										
									</div>
									<div class="t">塑造企业标杆性定位</div>
									<div class="con">
										通过数字化技术，将企业的品牌展现提高到国际创新水平，塑造企业品牌差异化的同时，把企业的品牌展现融入更多交互，让市场和客户可以更深入的了解企业品牌的价值，从而在业内树立标杆化形象


									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="case_box w1440">
					<div class="title">
						<div class="en">Video case</div>
						<div class="cn">视频案例</div>
					</div>
					<div class="item_box">
						<ul class="f-cb">
							<li>
								<div class="tu">
									<img src="<?php echo static_file('web/img/v1.jpg'); ?>" alt="">
									<div class="txt_box">
										<div class="t">品牌形象数字传播01</div>
										<div class="ico"></div>
									</div>
								</div>
							</li>
							<li>
								<div class="tu">
									<img src="<?php echo static_file('web/img/v2.jpg'); ?>" alt="">
									<div class="txt_box">
										<div class="t">品牌形象数字传播01</div>
										<div class="ico"></div>
									</div>
								</div>
							</li>
							<li>
								<div class="tu">
									<img src="<?php echo static_file('web/img/v2.jpg'); ?>" alt="">
									<div class="txt_box">
										<div class="t">品牌形象数字传播01</div>
										<div class="ico"></div>
									</div>
								</div>
							</li>
						</ul>
						<div class="switch">
							<span class="active"></span>
							<span></span>
						</div>
					</div>
					<div class="slick_item">
						<div class="item">
							<div class="item_list">
								<div class="tu">
									<img src="<?php echo static_file('web/img/v2.jpg'); ?>" alt="">
									<div class="txt_box">
										<div class="t">品牌形象数字传播01</div>
										<div class="ico">
											<img src="<?php echo static_file('web/img/play.png'); ?>" alt="">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item_list">
								<div class="tu">
									<img src="<?php echo static_file('web/img/v2.jpg'); ?>" alt="">
									<div class="txt_box">
										<div class="t">品牌形象数字传播01</div>
										<div class="ico">
											<img src="<?php echo static_file('web/img/play.png'); ?>" alt="">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</div>

	<div class="js-cont"></div>
	<div class="mask_bg"></div>

	<?php include_once VIEWS.'inc/footer.php'; ?>                          	
	<?php
		echo static_file('web/js/main.js');
		echo static_file('web/js/slick.min.js');
		echo static_file('web/js/swiper2.css');	
		echo static_file('web/js/swiper2.min.js');
	?>
	<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
</body>
</html>

<script>
	$(function(){
		scrollAni();
		$('.position a').eq(0).addClass('active');
		$('.nav li').eq(1).addClass('active');
		

		var mySwiper = new Swiper('.pro-swiper .swiper-container',{
		    centeredSlides: true,
		    watchActiveIndex: true,
		    speed: 1000,
		    slidesPerView: 5,
		    // loop : true,
		    initialSlide :2,
		    calculateHeight : true,
		    onSlideClick: function(swiper){
	           mySwiper.swipeTo(swiper.clickedSlideIndex,1000);
	           //console.log($(swiper.clickedSlide).attr('data-id'));
	        },
	        onSlideChangeEnd: function(swiper){
	        	var id=$(swiper.clickedSlide).attr('data-id');
	        	var _url="<?php echo site_url('ajax/ajax_vision'); ?>";
              	$('.ajax-box').empty().load(_url,function(){
              		var ww=$('.item_box').width();
              		$('.problem .list ul li').mouseover(function(){
				    	$(this).addClass('active').siblings().removeClass('active');
				    })
					var mr=40;
					$('.item_box ul li').css('margin-right',mr);
					var liW=(ww-mr)/2;
					var liOuterwidth=mr+liW;
					$('.item_box ul li').width(liW);
					var len=$('.item_box ul li').length;
					$('.item_box ul').width(liOuterwidth*len);

					$('.switch span').click(function(){
						var index=$(this).index();
						$(this).addClass('active').siblings().removeClass('active');
						$('.item_box ul').stop().animate({
							'left':-liOuterwidth*index
						})
					})

					$(window).resize(function(){
						ww=$('.item_box').width();
						mr=40;
						$('.item_box ul li').css('margin-right',mr);
						liW=(ww-mr)/2;
						liOuterwidth=mr+liW;
						$('.item_box ul li').width(liW);
						len=$('.item_box ul li').length;
						$('.item_box ul').width(liOuterwidth*len);
					})
			        $('.slick_item').slick({
						dots:true,
						slidesToShow: 2,
				        slidesToScroll: 2,
				        responsive: [{
							breakpoint:500,
							settings: {
								slidesToShow: 1,
								slidesToScroll:1,
								dots:true
							}
						}]
					})
              	});


            }
	    });



	    $('.problem .list ul li').mouseover(function(){
	    	$(this).addClass('active').siblings().removeClass('active');
	    })
	})

	window.onload=function(){
		var wrapper=document.getElementsByClassName('abanner')[0].getElementsByClassName('con')[0];
		var scroll= new BScroll(wrapper,{
			probeType: 3
		})
	}
	
</script>

<script>
	$(function(){
		var ww=$('.item_box').width();
		var mr=40;
		$('.item_box ul li').css('margin-right',mr);
		var liW=(ww-mr)/2;
		var liOuterwidth=mr+liW;
		$('.item_box ul li').width(liW);
		var len=$('.item_box ul li').length;
		$('.item_box ul').width(liOuterwidth*len);

		$('.switch span').click(function(){
			var index=$(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.item_box ul').stop().animate({
				'left':-liOuterwidth*index
			})
		})

		$(window).resize(function(){
			ww=$('.item_box').width();
			mr=40;
			$('.item_box ul li').css('margin-right',mr);
			liW=(ww-mr)/2;
			liOuterwidth=mr+liW;
			$('.item_box ul li').width(liW);
			len=$('.item_box ul li').length;
			$('.item_box ul').width(liOuterwidth*len);
		})


		$('.slick_item').slick({
			dots:true,
			slidesToShow: 2,
	        slidesToScroll: 2,
	        responsive: [{
				breakpoint:500,
				settings: {
					slidesToShow: 1,
					slidesToScroll:1,
					dots:true
				}
			}]
		})


		$(document).on('click','.item_box ul li,.slick_item .item_list',function(){
	    	$('.mask_bg').addClass('active');
	    	$('.js-cont').addClass('active').load('<?php echo site_url('ajax/ajax_video'); ?>',function(){
	    		$('.close').click(function(){
	    			$('.js-cont').empty().removeClass('active');
	    			$('.mask_bg').removeClass('active');
	    		})
	    	});
	    })
	})
</script>






